<template>
  <div>
    <h4 ref="h4Ref">{{ message }}</h4>
    <button @click="changeMessage">click</button>
  </div>
</template>

<script>
import { nextTick, ref } from "vue";

export default {
  setup() {
    const message = ref("");
    const h4Ref = ref(null);
    const changeMessage = () => {
      message.value += "1231231230";
      nextTick(() => {
        console.log("h4 height:", h4Ref.value.offsetHeight);
      });
    };
    return {
      message,
      h4Ref,
      changeMessage,
    };
  },
};
</script>

<style scoped>
h4 {
  word-wrap: break-word;
}
</style>
